<template>
  <div class="Complaint">
    <!-- 投诉 -->
    <div class="filter_container">
      <el-form :inline="true" :model="Complaint" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="deptIds" size="small" placeholder="请选择城市" multiple @visible-change='citydataList' @change="getdeptIdsIds"  ref='deptNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起日期">
          <el-date-picker v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期" :clearable='false'
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Complaint,Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" icon="el-icon-download" @click="handleExport(Complaint,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出统计</el-button>
          <el-button type="warning" plain size="small" icon="el-icon-download" @click="handleExportInfo(Complaint,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出明细</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 投诉列表 -->
    <div class="Complaintlist">
      <el-table :data="Complaintlist" border style="width: 100%" fit>
        <el-table-column label="后台单号" prop="xmbzNo" width="180" fixed align="center">
        </el-table-column>
        <el-table-column label="下单时间" prop="orderTime" width="180" align="center">
        </el-table-column>
        <el-table-column label="配送时间" prop="deliveryTime" width="180" align="center">
        </el-table-column>
        <el-table-column label="投诉日期" prop="createTime" width="180" align="center">
        </el-table-column>
        <el-table-column label="投诉内容" prop="complaintContent" width="180" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="处理内容" prop="processingResults" width="120" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="投诉部门" prop="responsibleDepartment" width="120" align="center">
        </el-table-column>
        <el-table-column label="失误类型" prop="departmentErrorType" width="180" align="center">
        </el-table-column>
        <el-table-column label="款式" prop="goodsName" width="300" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column label="入库时间" prop="processingResults" width="120" align="center">
        </el-table-column> -->
        <el-table-column label="签收时间" prop="receivedTime" width="120" align="center">
        </el-table-column>
        <el-table-column label="分仓" prop="branchWarehouse" width="120" align="center">
        </el-table-column>
        <el-table-column label="登记人" prop="operator" width="120" align="center">
        </el-table-column>
        <!-- <el-table-column label="处理人" prop="processingResults" width="120" align="center">
        </el-table-column> -->
        <el-table-column label="责任人" prop="personLiable" width="120" align="center">
        </el-table-column>
        <el-table-column label="城市" prop="deptName" width="120" align="center">
        </el-table-column>
        <el-table-column label="投诉渠道" prop="complaintChannel" width="120" align="center">
        </el-table-column>
        <el-table-column label="下单渠道" prop="channelName" width="120" align="center">
        </el-table-column>
        <el-table-column label="赔偿方式" prop="compensationMethod" width="120" align="center">
        </el-table-column>
        <el-table-column label="补偿金额" prop="cakeCompensatePrice" width="120" align="center">
        </el-table-column>
        <el-table-column label="诚意金" prop="sinceritGold" width="120" align="center">
        </el-table-column>
        <el-table-column label="礼品金" prop="giveGiftPrice" width="120" align="center">
        </el-table-column>
        <el-table-column label="赠送蛋糕金额" prop="freeCakeAmount" width="120" align="center">
        </el-table-column>
        <el-table-column label="退款金额" prop="refundAmount" width="120" align="center">
        </el-table-column>
        <el-table-column label="紧急程度" prop="complaintLevel" width="120" align="center" fixed='right'>
        </el-table-column>
        <!-- <el-table-column label="客户投诉" prop="processingResults" width="120" align="center">
        </el-table-column>
        <el-table-column label="工单类型" prop="processingResults" width="120" align="center">
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    deptdepts,
  } from "@/api/statistics";
  import {
    getExcelShowData
  } from "@/api/statistics"
  export default {
    data() {
      return {
        deptIds: [],
        Complaint: {
          excelType: 'COMPLAINT',
          deptIds: [],
          channelIds: [],
          // endTime: '',
          // startTime: '',
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
        },
        cityList: [], //城市
        Complaintlist: [],
        deptIdsIdslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getOrderList();
      window.addEventListener("keydown", this.keyupEnter);
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },
    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['deptNameRef'].blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
          this.handleFilter(this.Complaint,this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
        });
      },
      getdeptIdsIds(data) {
        this.deptIdsIdslist = data;
      },
      getOrderList() {
        // 订单列表分页
        getExcelShowData(this.Complaint).then(response => {
          this.Complaintlist = response.data.data;
        });
      },
      handleFilter(Complaint, times) { //查询
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Complaint.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Complaint.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Complaint.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Complaint.startTime);
        var time2 = Date.parse(this.Complaint.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getOrderList();
        }
      },

      handleExportInfo(Complaint, times) { //导出明细
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Complaint.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Complaint.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Complaint.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Complaint.startTime);
        var time2 = Date.parse(this.Complaint.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadComplaintDetailExcel?excelType=COMPLAINT&startTime=${this.Complaint.startTime}&endTime=${this.Complaint.endTime}&deptIds=${Complaint.deptIds}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      },
      handleExport(Complaint, times) { //导出统计
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Complaint.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Complaint.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Complaint.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Complaint.startTime);
        var time2 = Date.parse(this.Complaint.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadExcel?excelType=COMPLAINT&startTime=${this.Complaint.startTime}&endTime=${this.Complaint.endTime}&deptIds=${Complaint.deptIds}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      }
    }
  }
</script>
<style lang='scss'>
  .Complaintlist {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
</style>
